<template>
  <div id="home">
    <!-- 屏幕左侧导航 -->
    <el-menu background-color="#f7f9fb" text-color="#4F6272" active-text-color="#ffd04b" router>
      <el-menu-item id="name">
        <p>成绩积分系统</p>
      </el-menu-item>
      <el-menu-item index="front">
        首页
      </el-menu-item>
      <el-menu-item v-if="show_student || show_teacher" index="user_info">
        个人信息
      </el-menu-item>
      <el-menu-item v-if="show_student" index="grade_panel">
        总体面板
      </el-menu-item>
      <el-menu-item v-if="show_student" index="work_panel">
        作业面板
      </el-menu-item>
      <el-menu-item v-if="show_student" index="points_panel">
        积分面板
      </el-menu-item>

      <el-submenu v-if="show_teacher" index="teacher">
        <p slot="title">教师模块</p>
        <el-menu-item index="pub_asign" class="child_items">
          发布签到
        </el-menu-item>
        <el-menu-item index="pub_work" class="child_items">
          作业布置
        </el-menu-item>
        <el-menu-item index="subject_manage" class="child_items">
          课程管理
        </el-menu-item>
      </el-submenu>
      <el-submenu v-if="!show_student && !show_teacher" index="administrator">
        <p slot="title">管理员模块</p>
        <el-menu-item index="users_manage" class="child_items">
          账户管理
        </el-menu-item>
        <el-menu-item index="gonggao" class="child_items">
          发布公告
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-if="!show_student && !show_teacher" index="/">
        安全退出
      </el-menu-item>
    </el-menu>
    <el-drawer title="签到啦!" :visible.sync="table" direction="rtl" size="50%">
      <sign-in :timeEnd="timeEnd" ref="signInComponent"></sign-in>
    </el-drawer>
    <!-- 屏幕右侧路由 -->
    <router-view />
  </div>
</template>

<script>
import SockJS from "sockjs-client";
import Stomp from "webstomp-client";
import SignIn from '../student/SignIn.vue';
import axios from "axios";
import { getSignIn } from "@/utils/urlManager";

export default {
  name: 'HomeMenu',
  components: { SignIn },
  data() {
    return {
      table: false,
      show_student: false,
      show_teacher: false,
      timeEnd: ''
    };
  },
  mounted() {
    this.initRole();
    if (this.show_student) {
      this.connect();
      this.getSignIn();
    }
  },
  methods: {
    getSignIn() {
      axios.get(getSignIn)
        .then((response) => {
          // console.log(response.data);
          const now = new Date();
          const endline =  new Date(response.data.data.endline);
          if (response.data.data.status == "absent" && now < endline) {
            // console.log(response.data)
            this.$message.warning("检测到有未完成的签到")
            const resBody = {
              timeEnd: response.data.data.endline,
              subjectId: response.data.data.subjectId
            }
            this.timeEnd = resBody;
            this.table = true;
          }
        })
    },
    initRole() {
      const role = localStorage.getItem("role");
      if (role === "1") {
        this.show_student = true;
      } else if (role === "2") {
        this.show_teacher = true;
      }
    },

    connect() {
      const socket = new SockJS("http://localhost:8888/ws");
      this.stompClient = Stomp.over(socket);

      this.stompClient.connect({}, (frame) => {
        console.log("Connected: " + frame);
        this.stompClient.subscribe("/topic/signIn", (message) => {
          if (message.body) {
            let mesBody;
            try {
              // 去掉外层的引号
              const cleanedString = message.body.replace(/^"|"$/g, '').replace(/\\"/g, '"');

              // 解析 JSON 字符串
              mesBody = JSON.parse(cleanedString);
              console.log("mesBody"+mesBody);
            } catch (error) {
              console.error('Error parsing JSON:', error);
            }
            this.timeEnd = mesBody; // 更新签到时间
            this.table = true; // 打开签到抽屉
            this.$nextTick(() => {
              // 触发签到组件的倒计时更新
              this.$refs.signInComponent.restartCountdown();
            });
          }
        });
      }, (error) => {
        console.error("STOMP error", error);
      });
    },
    disconnect() {
      if (this.stompClient) {
        this.stompClient.disconnect();
      }
    },
  },
  beforeDestroy() {
    this.disconnect();
  }
};
</script>

<style scoped>
@media screen and (min-width: 768px) {
  #name {
    pointer-events: none;
    font-size: 20px;
    font-weight: 600;
    user-select: none;
  }

  p {
    margin-top: 0;
    margin-bottom: 0;
  }

  #home {
    width: 100vw;
    height: 100vh;
    display: flex;
  }

  .el-submenu .el-menu-item {
    min-width: 100px;
  }

  .child_items {
    padding-right: 0;
  }
}

@media screen and (max-width: 768px) {
  #home {
    width: 100vw;
    height: 100vh;
    display: flex;
  }

  .el-submenu .el-menu-item {
    min-width: 50px;
  }
}
</style>